Files Included : Template.xml Background Images Backup JS Documentation

Table of Contents : Installation Layout Widgets HTML Error 404
  • 12 / 8 / 2014 Created
  • 1.0.0 Version





Johny Grid | Documentation [ Mastemplate.com ]

1. Installation
  1. Unzip the Template.zip file.
  2. On Blogger Dashboard Click Template.
  3. Click on Backup / Restore.
  4. Click on Download Full Template to keep your old template.
  5. Click Browse... button. Find where the “Template.xml” file location.
  6. Then Click Upload.
  7. Edit mobile Preveiw. (follow images).



After installing the theme, there are minimun settings to make all widgets work fine in this template.

2. Blog Feed
  1. On Blogger Dashboard Click Settings.
  2. Click Other.
  3. In Site Feed > Allow Blog Feed Choose Full.
  4. Then Click Save settings.


Now you can Edit the meta tag Keywords of your blog. follow this steps


  1. On Blogger Dashbord Click Template.
  2. Click Edit HTML.
  3. Click Ctrl + F and Search for the following Code:
    4. <meta content='Keywords_Here' name='keywords'/>
  4. Change Keywords_Here with your blog keywords you want to use.
  5. Click Save template.



2. Layout

This is the Layout appearance of the default widgets i use in the demo blog.

Of course you can edit, change or remove any widget as you like.


3. Widgets
1. Main Blog Widget
  1. On Blogger Dashboard Click Layout.
  2. Click Edit on Blog Posts Widget.
  3. Now change it as you like it to be.
  4. Click Save.

This are the default settings i use in the demo blog.

Of course it's up to you, you can edit it as you like.


2. HTML/JavaScript Widget

To add HTML/JavaScript Widget you'd better to you use this.

You need to add your codes between tags <center> YOUR_CODE_HER </center>.
  1. On Blogger Dashboard Click Layout.
  2. Click Add a Gadget.
  3. Choose HTML/JavaScript.
  4. Add your code between the tags <center></center> like the image.
  5. Click Save.


Using this is very useful as it keeps your widget content aligned in the center and it gives a better appearance for it's content in other platforms like smart phones and tablets.

Now Replace YOUR_CODE_HERE with your code content you will add.

4. HTML
1. Left Navigation

  1. On Blogger Dashbord Click Template.
  2. Click Edit HTML.
  3. Click Ctrl + F and Search for the following Code:

    4. <ul id='menu-menu'>
  <li class='menu-item current-menu-item'><a href='/'>Home</a></li>
  <li class='menu-item'><a href='#'>Archive Page</a></li>
  <li class='menu-item'><a href='#'>Label &quot;Slider&quot; Page</a></li>
  <li class='menu-item'><a href='#'>Error 404 Page</a></li>
  <li class='menu-item'><a href='#'>Posts Style And Comments</a></li>
  <li class='menu-item'><a href='#'>Learn About Us Page</a></li>
  <li class='menu-item'><a href='#'>Purchase</a></li>
</ul>

  4. Change # with your links.
  5. Click Save template.


2. Footer Navigation

  1. On Blogger Dashbord Click Template.
  2. Click Edit HTML.
  3. Click Ctrl + F and Search for the following Code:

    4. <ul class='menu' id='menu-footer'>
  <li><a href='/'>Home</a></li>
  <li><a href='#'>Archive</a></li>
  <li><a href='#'>Error 404</a></li>
  <li><a href='#'>Sample Post</a></li>
</ul>

  4. Change # with your links.
  5. Click Save template.


3. Social Icons
  1. On Blogger Dashbord Click Template.
  2. Click Edit HTML.
  3. Click Ctrl + F and Search for the following Code:

    4. <div id='socialicons'>
  <a class='socialicons' href='#' target='_blank'><i class='fa fa-rss'/></a>
  <a class='socialicons' href='#' target='_blank'><i class='fa fa-twitter'/></a>
  <a class='socialicons' href='#' target='_blank'><i class='fa fa-facebook'/></a>
  <a class='socialicons' href='#' target='_blank'><i class='fa fa-google-plus'/></a>
  <a class='socialicons' href='#' target='_blank'><i class='fa fa-pinterest'/></a>
  <a class='socialicons' href='#' target='_blank'><i class='fa fa-linkedin'/></a>
</div>

  4. Click Save template.

5. Error 404

The page is already integrated with template you don't need to do anything.

But if you would like to edit it's Content Click Ctrl + F and Search for the following Code:

<div class='error-page'>

  <header>
    <h1 class='entry-title'>This is somewhat embarrassing, isn't it?</h1>
  </header>

  <div class='entry-content'>
    <p>It seems we can't find what you're looking for. Perhaps searching can help.</p>
    <form action='/search' class='searchform' id='searchform' method='get' role='search'><div>
      <label class='screen-reader-text' for='s'>Search for:</label>
      <input id='s' name='q' type='text' value=''/>
      <input id='searchsubmit' type='submit' value='Search'/>
      </div>
    </form>
    <div style='clear:both;'/>
  </div>

</div>